<template>
  <!-- 模板会自动解包 -->
  <div>{{ name }}</div>
  对象的例子：
  <div>{{ Bill.name }}</div>
  <div>{{ Bill.age }}</div>
  数组的例子：
  <div>{{ arr }}</div>
  嵌套对象的例子：
  <div>{{ Amy.name }}</div>
  <div>{{ Amy.age }}</div>
  <div>{{ Amy.nested.count }}</div>
  shallowRef的例子：
  <div>{{ state.count }}</div>
  响应式数据更新之后，获取dom的数据例子：
  <div id="container">{{ count }}</div>
</template>

<script setup>
  import { nextTick, onMounted, ref, shallowRef } from "vue";

  let name = ref('小森')
  console.log(name);
  console.log(name.value);
  setTimeout(() => {
    name.value = '庆森'
  }, 1000);

  /* 对象的例子 */
  let Bill = ref({
    name: 'bill',
    age: 18
  })

  setTimeout(() => {
    Bill.value.name = 'bill1'
    Bill.value.age = 20
  }, 2000)

  /* 数组的例子 */
  let arr = ref([1, 2, 3])
  setTimeout(() => {
    arr.value.push(4, 5, 6)
  }, 3000)

  /* 嵌套的对象 ，也具备深层次的响应式*/
  let Amy = ref({
    name: 'Amy',
    age: 18,
    nested: {
      count: 1
    }
  })
  setTimeout(() => {
    Amy.value.name = 'Amy1'
    Amy.value.age = 20
    Amy.value.nested.count += 2
  }, 4000);

  /* shallowRef ,只会将.value的访问转成响应式*/
  const state = shallowRef({
    count: 1
  })
  setTimeout(() => {
    //这个操作是不会触发视图更新的
    state.value.count += 2
  }, 5000);

  setTimeout(() => {
    //针对 .value 值的更改会触发响应式更新
    state.value = { count: 2 }
  }, 6000);

  /* 响应式数据发生后，获取DOM的值，拿到的是之前的数据 */
  let count = ref(0)
  let container = null

  onMounted(() => {
    container = document.getElementById("container")
    console.log('第一次打印container.innerText：', container.innerText);
  })


  setTimeout(async() => {
    count.value++
    //等待下一个DOM更新周期
    await nextTick()
    //此时就能获取到dom的最新值
    console.log('第二次打印container.innerText：', container.innerText);
  }, 2000);

</script>

<style lang="scss" scoped></style>
